<template>
  <div class="index">
    <el-row style="height: 60%;margin-bottom: 60px;" class="header">
      <el-row>
        <el-col :span="24" style="overflow: hidden; ">
          <el-menu
            :default-active="activeIndexMenu"
            :router="true"
            background-color="#03192e"
            text-color="#fff"
            active-text-color="#ffd04b"
            mode="horizontal"
            style="margin-bottom: -1px;background-color: #072f5a!important;"
            @select="handleSelect"
          >
            <!--            <el-menu-item index="1" class="top-menu">全部导航</el-menu-item>-->
            <el-menu-item index="/theme0/goodView?id=3" class="top-menu">商标注册</el-menu-item>
            <el-menu-item index="/theme0/searchIndex" class="top-menu">商标交易</el-menu-item>
            <el-menu-item index="/theme0/trademarkList" class="top-menu">商标中心</el-menu-item>
          </el-menu>
        </el-col>
      </el-row>
      <el-row class="search-content" type="flex" justify="center">
        <el-col :span="10" style="text-align: center;line-height: 60px;padding-top: 80px;">
          <div style="font-size: 50px;">数据彰显知识价值</div>
          <div>数据精准、智能算法 、深度挖掘、专业保障</div>
          <div>
            <el-input v-model="searchTxt" placeholder="请输入内容">
              <template slot="append">
                <el-button type="primary" @click="searchClick">搜索</el-button>
              </template>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row style="color: #111;margin-bottom: 60px;" type="flex" justify="center">
      <el-col :span="18">
        <el-row style="text-align: center; font-size: 30px;margin-bottom: 35px;">
          <el-col :span="24">让知识产权服务更简单</el-col>
        </el-row>
        <el-row style="margin-bottom: 100px;">
          <el-col :span="24">
            <el-tabs v-model="serviceActiveName">
              <el-tab-pane label="商标服务 Trademark service" name="first">
                <el-row v-if="services.trademarks">
                  <el-col v-for="item in services.trademarks" :key="item.id" :span="4">
                    <div style="text-align: center;line-height: 25px;" @click="handleGoodsView(item.id)">
                      <el-image :src="item.picUrl" fit="contain" style="width: 100%;height: 100px;display: block;" />
                      {{ item.name }} <br>
                      <span style="color: #ff4422">$ {{ item.counterPrice }}</span>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="专利服务 Patent service" name="second">
                <el-row>
                  <el-col v-for="item in services.patents" :key="item.id" :span="4">
                    <div style="text-align: center;line-height: 25px;" @click="handleGoodsView(item.id)">
                      <el-image :src="item.picUrl" fit="contain" style="width: 100%;height: 100px;display: block;" />
                      {{ item.name }} <br>
                      <span style="color: #ff4422">$ {{ item.counterPrice }}</span>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="版权服务 Copyright service" name="third">
                <el-row>
                  <el-col v-for="item in services.copyright" :key="item.id" :span="4">
                    <div style="text-align: center;line-height: 25px;" @click="handleGoodsView(item.id)">
                      <el-image :src="item.picUrl" fit="contain" style="width: 100%;height: 100px;display: block;" />
                      {{ item.name }} <br>
                      <span style="color: #ff4422">$ {{ item.counterPrice }}</span>
                    </div>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>

        <el-row style="color: #111;text-align: center; font-size: 30px;margin-bottom: 35px;" type="flex" justify="center">
          <el-col :span="24">
            智能解决方案
          </el-col>
        </el-row>

        <el-row type="flex" justify="center" style="text-align: center;margin-bottom: 20px;">
          <el-col :span="18">
            <el-row>
              <el-col :span="4" :offset="5" :class="acticeTab3 === 1 ? 'tab3Item activeTab3' : 'tab3Item'">
                <el-button type="text" @click="acticeTab3 = 1">自动化商标注册</el-button>
              </el-col>
              <el-col :span="4" :offset="1" :class="acticeTab3 === 2 ? 'tab3Item activeTab3' : 'tab3Item'" @click="acticeTab3 = 2">
                <el-button type="text" @click="acticeTab3 = 2">自主商标信息提交</el-button>
              </el-col>
              <el-col :span="4" :offset="1" :class="acticeTab3 === 3 ? 'tab3Item activeTab3' : 'tab3Item'" @click="acticeTab3 = 3">
                <el-button type="text" @click="acticeTab3 = 3">公平商标交易中心</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row v-if="acticeTab3 === 1" type="flex" justify="center">
          <el-col :span="10" style="padding: 50px;">
            <img style="width: 100%" src="https://www.quandashi.com/images6/bg9.jpg">
          </el-col>
          <el-col :span="8" style="padding-top: 80px;">
            <div style="font-size: 22px;margin-bottom: 20px;">商标分类表</div>
            <div style="line-height: 30px;color: #898989;margin-bottom: 20px;">通过对历史所有的商品服务项进行分析，不仅提供标准尼斯商品的查询，更可以支持历史以来被官方认可的非标准商品查询，呈现更全面、更精准的商标分类信息，帮你护品牌周全，保品牌无忧。</div>
            <div>
              <el-button type="warning" size="mini" style="width: 150px;">立即使用</el-button>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="acticeTab3 === 2" type="flex" justify="center" />
        <el-row v-if="acticeTab3 === 3" type="flex" justify="center" />

        <el-row style="color: #111;text-align: center; font-size: 30px;margin-bottom: 45px;margin-top: 120px;" type="flex" justify="center">
          <el-col :span="24">
            新闻、资讯中心
          </el-col>
        </el-row>
        <el-row v-if="notes != undefined" type="flex" justify="space-around">
          <template v-for="(item, index) in notes">
            <el-col v-if="item.length > 0" :key="index" :span="7">
              <div style="padding: 6px;font-size: 12px;line-height: 20px;border: 1px #bbb solid;" @click="$router.push('/theme0/noteView?id='+item[0].id)">
                <el-image v-if="item[0].imageCover.length > 0" style="width: 100%; height: 200px;" fit="cover" :src="item[0].imageCover[0].url" />
                {{ item[0].title }}
              </div>
              <div style="padding: 6px;font-size: 12px;line-height: 20px;">
                <ul>
                  <li v-for="(no, noIndex) in item" :key="noIndex" @click="$router.push('/theme0/noteView?id='+no.id)">{{ no.title }}</li>
                  <li v-for="nu in 4 - item.length" :key="nu">&nbsp;</li>
                  <li style="color: #0f99f8;text-align: right;">更多+</li>
                </ul>
              </div>
            </el-col>
          </template>
        </el-row>
      </el-col>
    </el-row>
    <el-row style="color: #fff; background: #0c3465;line-height: 25px;padding:20px; text-align: center;font-size: 12px;">
      <el-col :span="24">
        公司地址：河南省洛阳市经济技术区长夏门街32号863创智广场1幢1620号
        联系电话：17301376592
        <br>
        版权所有 © 2019 凯卓知产
        <!--        京ICP备xxxxxx号-->
      </el-col>
    </el-row>

  </div>
</template>

<script>
import { homeData } from '@/api/webSite/index'
export default {
  name: 'Index',
  data() {
    return {
      activeIndexMenu: '1',
      acticeTab3: 1,
      serviceActiveName: 'first',
      searchTxt: '',
      services: {
        trademarks: [],
        patents: [],
        copyright: []
      },
      notes: undefined
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      homeData().then(res => {
        this.services.trademarks = res.data.data.trademarks
        this.services.patents = res.data.data.patents
        this.services.copyright = res.data.data.copyright
        this.notes = res.data.data.listNotes
      })
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath)
    },
    searchClick() {
      this.$router.push({ path: '/theme0/searchIndex', query: { searchName: this.searchTxt }})
    },
    handleGoodsView(id) {
      // this.$router.push({ path: '/theme0/goodView', query: { id: id }})
    }
  }
}
</script>
<style>

</style>

<style scoped>
.index {
  width: 100%;
  color: #fff;
  overflow-x: hidden;
  box-sizing: border-box;
}
.header {
  height: 65%;
  padding-bottom: 50px;
  background: url(../../assets/imgs/indexBak.jpg) no-repeat;
  margin-bottom: 20px;
}
.activeTab3 {
  border-bottom: 2px solid #ff7200;
}
.tab3Item {
  height: 35px;
  line-height: 30px;
}
.tab3Item button {
  color: #111111;
}
.top-menu {
  background-color: #072f5a!important;
  height: 40px;
  line-height: 40px;
}
ul {
  padding: 0;
}
ul li {
  list-style: none;
}
</style>
